<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/assets/home/css/mui.min.css"  />
    <link rel="stylesheet" href="/assets/home/css/swiper-bundle.css" />
    <link rel="stylesheet" href="/assets/home/css/animate.min.css" />
    <link rel="stylesheet" href="/assets/home/css/reset.css"  />
    <link rel="stylesheet" href="/assets/home/css/coupon_info.css" />
    <title>优惠券详情</title>
    <script src="/assets/home/js/jquery-1.9.1.min.js"></script>
    <script src="/assets/home/js/mui.min.js"></script>
    <script src="/assets/home/js/wow.min.js"></script>
    <script src="/assets/home/js/swiper-bundle.min.js"></script>
    <style>
        .swiper {
            width: 100%;
            height: 30px;
        }  
    </style>
</head>
<body>
    <div class="coupon_cover">
        <img src="/assets/home/images/coupon-back.jpg" />
    </div>

    <div class="coupon_detail">
        <div class="coupon_info wow">
            <div class="left">
                <div class="left_top">
                    <div>
                        <span>{$coupon.rate*100}</span>折
                    </div>
                    <div class="top_info">
                        <div>{$coupon.title}</div>
                        <div>COUPON</div>
                    </div>
                </div>
            </div>
            <div class="receive">
                <button type="button" 
                {if condition="$coupon.status.code&&$coupon.statusTime.code"}class="mui-btn mui-btn-warning"
                {else /}class="mui-btn" disabled style="cursor: not-allowed;"
                {/if}>{$coupon.status.code?$coupon.statusTime.code?$coupon.status.msg:$coupon.statusTime.msg:($coupon.status.msg)}</button>
                <!-- <button type="button" class="mui-btn" disabled>您已领取</button> -->
            </div>
        </div>
        <div class="coupon_prompt wow" data-wow-delay="100ms">
            <div class="prompt_title">温馨提示：</div>
            <div><span>•</span>活动开始时间：{$coupon.createDate}</div>
            <div><span>•</span>活动结束时间：{$coupon.endDate}</div>
            <div><span>•</span>数量：{$coupon.total}张，每人限领1张，赶快领取吧！</div>
        </div>
    </div>
    <div class="swiper CouponList wow">
        <div class="swiper-wrapper">
            {foreach $receives as $receive}
            <div class="swiper-slide">！{$receive.business.nickname} 用户 在 {$receive.createDate} 领取优惠券</div>
            {/foreach}
        </div>
    </div>
</body>
</html>
<script>
    id = {$coupon.id}

    $('.receive .mui-btn').click(function(){
        $.post('/home/discount/getCoupon',{id})
        .then((data)=>{
            if(data.code){
                $(this).removeClass('mui-btn-warning')
                $(this).text(data.msg)
                $(this).prop('disabled',true)
            }
            mui.toast(data.msg, {duration: 3000})
        },(jqXhR)=>{
            console.log(jqXhR.responseText())
        })
    })

    var swiper = new Swiper(".CouponList", {
        direction: 'vertical',
        loop: true,
        autoplay: {
            delay: 1000,
            disableOnInteraction: true,
        }
    });

    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        scrollContainer: '#box' // 可选滚动容器选择器，否则使用窗口
    }).init();
</script>